<template>
    <div>

<div class="common-layout">
                        <!-- 去除外边框 -->
<el-card shadow="never" class="border-0">

    <ListHeader @create="handleCreate" @refresh="getData"/>

    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="title" label="公告标题"/>
        <el-table-column prop="create_time" label="发布事件" width="380" />
        <el-table-column  label="操作" width="180" align="center">
            <template #default="scope">
                <el-button type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
                <el-popconfirm title="是否要删除该公告?" 
                        confirmButtonText = '确认'
                        cancelButtonText = '取消'
                        @confirm.stop = "handleDelete(scope.row.id)">
                                <template #reference>
              

                            
                            <el-button  text="true" type="primary" size="small" >
                                删除
                            </el-button>

                                </template>

                        </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <div class="flex items-center justify-center mt-5">
                    <el-pagination background layout="prev,pager, next"
                    :total="total" 
                    :current-page="currentPage"
                    :page-size="limit"
                    @current-change="getData"/>
    </div>

    <!-- 表单弹框，新增和修改并用 -->
    <FormDrawer ref="formDrawerRef"
    :title="drawerTitle"
    @submit="handleSubmit">
    <!-- epf表单组件 model和ref的值不能冲突 -->
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
        <el-form-item label="公告标题" prop="title">
            <el-input v-model="form.title" placeholder="公告标题" ></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
            <el-input v-model="form.content" placeholder="公告内容" type="textarea" :rows="5"></el-input>
        </el-form-item>
    </el-form>
    </FormDrawer>
</el-card>
</div>
    </div>

</template>

<script setup>
import {
    getNoticeList,
    createNotice,
    updateNotice,
    deleteNotice,
} from '~/api/notice.js'
import FormDrawer from '~/components/FormDrawer.vue';
import {
     useInitTable ,useInitForm
} from '~/composables/useCommon.js'
import ListHeader from '~/components/ListHeader.vue';
const{
        tableData,
        loading,
        currentPage,
        total,
        limit,
        getData,
        handleDelete,
} = useInitTable({
    getList:getNoticeList,
    delete:deleteNotice,
})

const {
        formDrawerRef,
        formRef,
        form,
        rules,
        drawerTitle,
        handleSubmit,
        handleCreate,
        handleEdit,
} =useInitForm({
    form:{
    //与传递的一一对应
    title:"",
    content:"",
    },
    rules : {
    title:[
    {
            required: true, //表示此input是必填的
            message: '公告标题不能为空',
            trigger: 'blur' //触发事件-->失去焦点
    }
    ],
    content:[
    {
            required: true, //表示此input是必填的
            message: '公告内容不能为空',
            trigger: 'blur' //触发事件-->失去焦点
    }
    ],
},
    getData,
    update:updateNotice,
    //接口方法
    create:createNotice
})

useInitForm()






</script>